<template>
  <div>
<!--    用户名登录-->
    <el-form
      label-width="100px"
      style="max-width: 460px"
      class="fromBasePosition"
      :rules="rules"
      ref="form"
      :model="ruleForm"
      v-if="!LoginByAccount"
    >
      <h2 style="text-align: center">欢迎回来</h2>
      <el-divider content-position="center">密码登录</el-divider>
      <el-form-item label="账号" >
        <el-input v-model="ruleForm.account" placeholder="请输入用户名"/>
      </el-form-item>

      <el-form-item label="密码" >
        <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password/>
      </el-form-item>


      <el-row type="flex" justify="center">
        <el-col style="text-align: center"> <el-button type="text" @click="forRegister">注册账号</el-button></el-col>
        <el-col style="text-align: center">
          忘记密码？
          <el-button type="text" @click="LoginForPhone">手机号登录</el-button>
        </el-col>
      </el-row>

      <div style="display: flex;justify-content: center">
        <el-button type="primary" @click="forLogin" style=" margin-bottom: 10px;width: 70%;">登录</el-button>
      </div>
    </el-form>
<!--    短信登录-->
    <el-form
      label-width="100px"
      style="max-width: 460px"
      class="fromBasePosition"
      :rules="rules"
      ref="form"
      :model="ruleForm"
      v-else
    >
      <h2 style="text-align: center">欢迎回来</h2>
      <el-divider content-position="center">短信登录</el-divider>

      <el-form-item label="手机号" >
        <el-input v-model="ruleForm.phone" placeholder="请输入手机号">
          <el-button slot="append" @click="getConfirmCode">获取验证码</el-button>
        </el-input>
      </el-form-item>

      <el-form-item label="验证码" >
        <el-input v-model="ruleForm.confirm" placeholder="请输入验证码"/>
      </el-form-item>


      <el-row type="flex" justify="center">
        <el-col style="text-align: center"> <el-button type="text" @click="forRegister">注册账号</el-button></el-col>
        <el-col style="text-align: center">
          忘记密码？
          <el-button type="text" @click="LoginForPhone">用户名登录</el-button>
        </el-col>
      </el-row>

      <div style="display: flex;justify-content: center">
        <el-button type="primary" @click="LoginByPhone" style=" margin-bottom: 10px;width: 70%;">登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {Login,smsLogin,FindUserByPhone} from "../api/index";

export default {
  name: "LoginForm",
  data(){
    const checkPhone = (rule, value, callback)=>{
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
      if (!value) {
        return callback(new Error('电话号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(+value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (phoneReg.test(value)) {
            callback()
          } else {
            callback(new Error('电话号码格式不正确'))
          }
        }
      }, 100)
    }
    return{
      status:'',
      ruleForm:{
        account:"",
        password:"",
        phone: '',
        confirm:''
      },
      rules:{
        account:[
          {required:true,trigger:'blur',message:'请输入账号'},
        ],
        password: [
          {required:true,trigger:'blur',message:'请输入密码'},
        ],
        phone: [
          {required:true,trigger:'blur',message:'请输入正确的手机号',validator: checkPhone}
        ],
        confirm:[
          {required:true,trigger:'blur',message:'请输入验证码'},
        ]
      },
    };
  },
  methods:{
    forLogin(){
      Login({
        "account":this.ruleForm.account,
        "pswd":this.ruleForm.password
      }).then(res=>{
        if(res.data === 0){
          this.GLOBAL.account=this.ruleForm.account     //用户账号传给全局变量
          this.GLOBAL.phone=''
          this.GLOBAL.status = '0'
          this.$router.push("/HomePage")
          this.$message.success('登陆成功')
        }else if(res.data ===  1){
          this.GLOBAL.status = '1'
          this.GLOBAL.account=this.ruleForm.account
          this.GLOBAL.phone=''
          this.$router.push("/HomePage")
          this.$message.success('登陆成功')
        }
        else {
          this.$message.error('登录失败，请重试')
        }
      })
    },
    LoginByPhone(){
      FindUserByPhone({"phone":this.ruleForm.phone}).then(res=>{
        this.status = res.data.status
      })
      smsLogin({
        "account":this.ruleForm.phone,
        "vCod": this.ruleForm.confirm
      }).then(res=>{
        if(this.status===0){
          this.GLOBAL.account=''
          this.GLOBAL.phone=this.ruleForm.phone
          this.GLOBAL.status = '0'
          this.$router.push("/HomePage")
          this.$message.success('登陆成功')
        }
        else if(this.status===1){
          this.GLOBAL.status = '1'
          this.GLOBAL.phone=this.ruleForm.phone
          this.GLOBAL.account=''
          this.$router.push("/HomePage")
          this.$message.success('登陆成功')
        }
        else {
          this.$message.error('登录失败，请重试')
        }
      })
    },
    forRegister(){
      this.$router.push("/Register");
    },
    LoginForPhone(){
      this.LoginByAccount = !this.LoginByAccount
    },
    getConfirmCode(){
      // console.log('验证码是123456')
      let check = /^1[3|4|5|7|8][0-9]{9}$/
      // 验证手机号格式
      if(!check.test(this.ruleForm.phone)){
        window.alert('手机号格式不正确！');
        return;
      }
      // 验证手机号是否被注册


    }

  },
  props:{
    LoginByAccount:Boolean
  }
}
</script>

<style scoped>
.fromBasePosition{
  margin:180px auto;
  border: 1px solid #f6f6f6;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;

}
.fromBasePosition >>> .el-form-item__label{
  text-align: center;
}
.fromBasePosition >>> .el-select{
  width:100%;
}
.el-row {
  margin-bottom: 20px;
}


</style>
